<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
  body{
	text-align:center;
  }
  #map_canvas{
	margin: 20px auto;
	border: 1px dashed #C0C0C0;
	width: 800px;
	height: 500px;
  }
</style>

<script type="text/javascript">
  //将变量设置为全局变量方便方法调用
  var map, infowindow;

  function initialize() {
    var latlng = new google.maps.LatLng(30.33508, 114.17211);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		infowindow = new google.maps.InfoWindow();
		//调用创建marker函数
		creatMarker(latlng);
  }

 //创建Marker
 function creatMarker(position) {
	var g = google.maps;
	var image = 'images/icon5.png';
	var marker = new g.Marker({
      position: position,
      map: map,
			icon: image,
			title:"This is a Marker!"
	});

	//添加marker单击事件
	g.event.addListener(marker, "click", function() {
		var html = makeHTML();
		infowindow.setOptions({content: html, pixelOffset: new g.Size(0,0)});
		infowindow.open(map, this);
	});
	return marker;
 }

 //为infowindow添加内容
 function makeHTML() {
	var html ="<div id='infowindow'>" +
				//"<div id='tochange'>" + info_content + "<\/div>" +
				"<div id='tochange'>Hello World!<\/div>" +
				"<p id='content'><a href='javascript:void(0)' onclick='contentChange()'>Change content<\/a><\/p>" +
				"<button onclick='buttonListener()'>点我</button>"+
				"<\/div>";
  return html;
 }
 //
 function contentChange() {
	document.getElementById("content").innerHTML = "I am changed!"; 
 }
 //按钮事件
 function buttonListener() {
	alert("You clicked me!");
	return;
 }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>